import React, {Component} from 'react';
import {Icon, Popconfirm, Table} from 'antd';

export default class ItemTable extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        const rowSelection = {
            onChange: this.props.checkChange
        };
        const columns = [{
            title: 'id',
            dataIndex: 'id',
            sorter: (a, b) => a.id - b.id,
        }, {
            title: '类目名称',
            dataIndex: 'itemName'
        }, {
            title: '图片地址',
            dataIndex: 'itemPic'
        }, {
            title: '链接地址',
            dataIndex: 'linkUrl'
        },{
            title: '创建时间',
            dataIndex: 'createTime'
        }, {
            title: '操作',
            width: 100,
            render: (text, record) =>
                <div className='opera'>
                    <span onClick={() => this.props.editClick(record.id)}>
                         <Icon type="edit"/> 修改
                    </span><br/>
                    <span><Popconfirm title="确定要删除吗?" onConfirm={() => this.props.onDelete(record.id)}><Icon
                        type="minus-square-o"/> 删除 </Popconfirm></span>
                </div>
        }];
        return (
            <Table
                rowSelection={rowSelection}
                columns={columns}
                dataSource={this.props.dataSource}
                bordered={true}
                scroll={{x: '100%'}}
                className='formTable'
                loading={this.props.loading}
                pagination={{  //分页
                    total: this.props.total, //数据总数量
                    pageSize: this.props.pageSize,
                    current: this.props.current,
                    showSizeChanger: true,  //是否显示可以设置几条一页的选项
                    showTotal: () => `共${this.props.total}条`,
                    onChange: (current,pageSize) => this.props.pageSizeChange(current, pageSize)
                }}
            />
        )
    }
}
